<template>
  <view>
	<hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
    <u-loading-page :loading="pageLoading"></u-loading-page>
    <u-sticky>
		<view class="search-box flex" ref="search">
			<view class="input-product m-b-40">
			  <u-search placeholder="搜索" bgColor="rgb(242 242 242 / 0)" searchIconColor="rgb(242 242 242 / 65%)" placeholderColor="rgb(242 242 242 / 85%)" v-model="searchData.keywords" @change="onSearchChange" @search="onSearchChange" :showAction="false"></u-search>
			</view>
		</view>
    </u-sticky>

    <scroll-view class="" scroll-y refresher-enabled show-scrollbar :refresher-triggered="triggered"
                 @refresherrefresh="$u.throttle(onRefresherrefresh, 200)" @scrolltolower='$u.throttle(onScrolltolower,1000)'
                 :style="{height: `${screenHeight}px`}">

      <u-empty mode="list" v-if="listData.length === 0" :style="{height: `${screenHeight}px`}" />

      <view class="p-l-10 p-r-10">
        <view class="item" v-for="(item, index) in listData" :key="index" @tap="itemClick(item)">
          <view>
            <u-avatar
                fontSize="18"
                randomBgColor
                :text="item.realName[item.realName.length - 1]"
            ></u-avatar>
          </view>
          <text class="text"> {{ item.realName }} </text>
        </view>
      </view>

    </scroll-view>
  </view>
</template>

<script>
import _ from 'lodash'

import {
  listOptionsPage
} from '@/apis/sys/employee'

export default {
  data() {
    return {
		config: {
		  title: "员工",
		  color: "#ffffff",
		  //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
		  backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
		  rightButton: [
		    {
		      key: "btn1",
		      icon: "&#xe888;",
		      position: "left",
		    },
		  ],
		},
      searchData: {
        keywords: ''
      },
      screenHeight: 0,
      pageLoading: true,
      triggered: false,
      listData: [],
      pageInfo: {
        current: 1, // 当前页
        size: 10, // 每页数据条数
        sort: '', // 排序字段
        order: 'desc', // 排序方向
        total: 0 // 总数居量
      }
    }
  },
  onLoad() {
    this.initData()
  },
  onReady() {
	const height = this.$refs.hxnb.$el.offsetHeight + (this.$refs.search.$el.offsetHeight);
	const sysInfo = uni.getSystemInfoSync()
	this.screenHeight = sysInfo.windowHeight - height
  },
  methods: {
    initData() {
      this.listPage()
    },
    listPage() {
      const params = {
        page: this.pageInfo,
        data: this.searchData
      }
      uni.showLoading({
        title: "加载中"
      })
      listOptionsPage(params).then(res => {
        if (!res.data.flag) return
        const records = res.data.data.records || []
        this.listData.push(...records)
      }).finally(_ => {
        this.triggered = false
        this.pageLoading = false
        uni.hideLoading()
      })
    },
    onSearchChange() {
      this.handlerSearch()
    },
    handlerSearch: _.debounce(function() {
      this.listData = []
      this.listPage()
    }, 200),
    itemClick(row) {
      uni.$emit("on-selected-salesman", row)
      this.$Router.back()
    },
    onRefresherrefresh() {
      this.triggered = true
      this.listData = []
      this.listPage()
    },
    onScrolltolower() {}
  }
}
</script>

<style lang="scss" scoped>
.item {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 10rpx;
  background: #fff;
  padding: 20rpx 10rpx;
  margin-top: 2rpx;

  .text {
    margin-left: 20rpx;
    font-size: 30rpx;
  }
}
.search-box {
	padding-top: 30rpx;
	justify-content: center;
	background: linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246));
}
.input-product {
  width: 95%;
  border-radius: 50upx;
  height: 70upx;
  line-height: 70upx;
  color: #fff;
  display: flex;
  background: rgba(248, 248, 248, 0.34);
}
</style>
